<template>
  <el-tabs type="border-card">
    <el-tab-pane label="常规">
      <el-form :inline="true" :model="form" label-width="100px">
        <el-form-item label="流程ID">
          <el-input v-model="form.id" disabled />
        </el-form-item>
        <el-form-item label="流程名称">
          <el-input v-model="form.name" :disabled="!isEditModel" @input="nameChange" />
        </el-form-item>
        <el-form-item label="流程类型">
          <el-input v-model="form.type" disabled />
        </el-form-item>
        <el-form-item label="流程描述">
          <el-input v-model="form.remark" :disabled="!isEditModel" type="textarea" :rows="5" @input="remarkChange" />
        </el-form-item>
      </el-form>
    </el-tab-pane>
    <!-- <el-tab-pane label="Tab2">Tab2</el-tab-pane> -->
  </el-tabs>
</template>

<script>
import Utils from '../Utils'

export default {
  name: 'PhuketPanelProcess',
  props: {
    modeler: {
      type: Object,
      required: true
    },
    process: {
      type: Object,
      required: true
    },
    model: {
      type: String,
      required: true
    }
  },
  data: function() {
    return {
      form: {
        id: '',
        name: '',
        type: '',
        color: null
      }
    }
  },
  computed: {
    isEditModel() {
      return Utils.isEditModel(this.model)
    }
  },
  watch: {
    // 监听process值变化并调用
    process: function() {
      this.updateFrom()
    }
  },
  mounted: function() {
    this.updateFrom()
  },
  methods: {
    // 更新表单对象
    updateFrom() {
      this.process.businessObject.type = this.$route.name
      if (!this.process) return
      this.form = {
        ...this.process.businessObject,
        ...this.process.businessObject.$attrs
      }
      // console.log(this.form);
    },
    // 属性面板名称，更新回Process
    nameChange(val) {
      this.process.businessObject.name = val
    },
    // 属性面板描述，更新回Process
    remarkChange(val) {
      Utils.updateElement(this.modeler, this.process, { remark: val })
    }
  }
}
</script>
